<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>组件</title>

    <style>
      .main{clear:both;margin-top:20px}
      .catalog{ width:300px;float:left;text-align:center;background:grey;height:200px;line-height:200px}
      .product{width:70%;float:right}
      li{list-style:none;width:300px;height:300px;float:left}

    </style>
</head>

<body>
<div id="app">
    <app :app="catalogs[0]"><img width="300px" src='https://img2.baidu.com/it/u=3981638728,752093794&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500' /></app>
    <app :app="catalogs[1]" ></app><!--因使用标签是app <app>传递的值</app> 只能作用在 app标签内的slot 中-->
    <app :app="catalogs[2]" ><span style="color:red">要是牛兜汤,找你们同学</span></app>
</div>


</body>
<script>

    let product ={
        props:['product'],
        template:"<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
    }

    let catalog={
        data:function(){
          return {show:true}
        },
        methods:{
           catshow:function(){
             this.show=!this.show
           }
        },
        props:['data'],
        
        template:"<div><div class='catalog' @click='catshow' ><div style='width:100%'></div>{{data.name}}</div>"+
                 "<ul class='product' v-if='show' ><product v-for='(product,index) in data.products' :product='product'></product>"+
                 "</ul></div>",
        components:{
         product
        }
    }

    let app={
        props:['app'],
        //目录的模板 slot 可以理解为是变量,在 <app></app> 写html 标签即可传递
        template:"<div class='main'><catalog :data='app'></catalog><slot>你没充值，就这么low快点充值</slot></div>",
        components:{
         catalog
        }
    }

    new Vue({
      el:"#app",
      data:{
         catalogs:[
           {
             id:1,
             name:'烧烤',
             products:[
                {
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                },
                 {
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                },
                 {
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                }
              ]
           },
           {
             id:2,
             name:'海鲜',
             products:[
                {
                  name:'金昌鱼',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                },
                {
                  name:'金昌鱼',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                },
                {
                  name:'金昌鱼',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                }
              ]
           },
           {
             id:3,
             name:'牛兜汤',
             products:[
                {
                  name:'拌面',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                },
                {
                  name:'萝卜干',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                },
                {
                  name:'槐猪',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                }
              ]
           }
         ]
      },
      //template:'<app  :data="catalogs" />',
      components:{
         app,
      }
    })




</script>

</html>